<template>
	<div class="commentsParent">
		<div v-for="item in commentlist" :key="item.id">
			<div class="commentitem">
				<div class="userImg">
					<img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img" alt="" />
					<img v-else src="../../assets/default_img.jpg" alt="" />
				</div>
				<div class="commentContent">
					<div class="com_name">
						<span v-if="item.userinfo">{{ item.userinfo.name }}</span>
						<span v-else>此用户无姓名</span>
						<!-- <span>{{item.comment_date}}kkk</span> -->
					</div>
					<div class="com_date">
						<span>{{ item.comment_date }}</span>
					</div>

					<div v-if="item.comment_content" class="com_content">
						{{ item.comment_content }}
						<span class="publishs" @click="publishclick(item.comment_id)">回复</span>
					</div>
					<div v-else>赞赞赞</div>
				</div>
			</div>
			<div class="nested-comment"><commentitem :commentchild="item.child" @postpublish="publishclick"></commentitem></div>
		</div>
	</div>
</template>

<script>
import commentitem from './commentitem.vue';

export default {
	data() {
		return {
			commentlist: null
		};
	},
	methods: {
		async commentData() {
			const res = await this.$http.get('/comment/' + this.$route.params.id);
			// console.log(res);
			if (res.data) {
				this.$emit('lengthselect', res.data.length);
			}
			this.commentlist = this.changeCommentData(res.data);
		},
		changeCommentData(data) {
			function fn(temp) {
				let arr1 = [];
				for (var i = 0; i < data.length; i++) {
					if (data[i].parent_id == temp) {
						arr1.push(data[i]);
						data[i].child = fn(data[i].comment_id);
					}
				}
				return arr1;
			}
			return fn(null);
		},
		publishclick(id) {
			// console.log(id)
			this.$emit('publishclick', id);
		}
	},
	created() {
		this.commentData();
	},
	components: {
		commentitem
	}
};
</script>

<style lang="less">
.commentsParent {
	padding: 20px 15px;
	> div {
		border-bottom: 1px solid #e7e7e7;
	}
	.commentitem {
		display: flex;
		// border-bottom: 1px solid #e7e7e7;
		padding: 10px 0;
		.userImg {
			margin-right: 10px;
			img {
				width: 35px;
				height: 35px;
				border-radius: 50%;
			}
		}
		.commentContent {
			flex: 1;
			position: relative;
			// border: 1px solid red;
			flex-direction: column;
			.com_date {
				color: #999999;
				font-size: 3.2vw;
			}
			.com_content {
				color: #212121;
			}
			.com_name {
				font-size: 3.467vw;
			}
			div {
				display: flex;
				justify-content: flex-start;
				color: #757575;
				font-size: 13px;
				margin-bottom: 5px;
			}
			div {
				font-size: 13px;
			}
			.publishs {
				position: absolute;
				right: 0;
				color: #6fa4d5;
				// top: 0;
				bottom: 25px;
			}
		}
	}
}
.nested-comment {
	margin: 0 0 3.778vw 11.111vw;
	padding: 0 1.389vw;
	// border: 1px solid red;
	max-height: 200px;
	overflow: auto; //超出滚动
	background: #f4f4f4;
	border-radius: 1.111vw;
	// z-index: 100;
	// overflow-x: hidden;
}
</style>
